     <template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
    >
        <el-form
            :inline="false"
            :model="addForm"
            size="mini"
            class="demo-form-inline"
            label-width="120px"
            :rules="dataRule"
            ref="ruleForm"
        >
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="addForm.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding:10px 40px">取 消</el-button>
                <el-button
                    type="primary"
                    style="padding:10px 40px"
                    @click="addAndEditSubmit('ruleForm')"
                >保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script type="text/ecmascript-6">
import API from '@/api';
export default {
    data() {
        return {
            dialogVisible: false,
            dialogTitle: '新增',
            addForm: {
                name: ''
            },
            type: 1,
            dataRule: {
                name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],

            }
        };
    },
    methods: {
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },
        init(item, appId, pageId) {
            this.dialogVisible = true;
            if (item) {
                this.addForm = {
                    name: item.name,
                    id:item.id

                };
                this.type = 2; //编辑
                this.dialogTitle = '编辑';
            } else {
                this.type = 1; // 新增
                this.dialogTitle = '新增';
            }
        },

        // 清空新增中的数据
        clearForm() {
            this.addForm = {
                name: ''
            };
        },
        // 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 新增
                    if (this.type == 1) {
                        API.menu.addAppFunction(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功'
                                });
                                this.clearForm();
                                this.$emit('refreshDataList');
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        // 编辑
                        API.menu.editApp(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                });
                                this.clearForm();
                                this.$emit('refreshDataList');
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>